<template>
  <el-dialog
    :title='title'
    :visible.sync="viewDialogVisible"
    width="60%"
    :before-close="handleCloseViewDia">
    <div class="view-dialog-container">
      <div class="left-tree">
        <el-tree default-expand-all :data="viewTreeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right-info">
        <div
          class="info-item"
          v-for="(item,index) in infoData"
          :key="index"
          :class="item.isSize === '1'? 'w50' : 'w100'"
        >
          <label>{{item.fieldAlias}}:</label>
          <p>{{item.fieldValue}}</p>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleCloseViewDia">取 消</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { getViewTreeForm } from '@/api/search/advanced'

export default {
  name: 'viewDialog',
  props:['viewDialogVisible','viewTreeData','viewRow','getViewForm','infoData'],
  data() {
    return {
      defaultProps: {
        children: 'child',
        label: 'tableName'
      },
      title:''
    };
  },
  methods:{
    handleCloseViewDia(){
      this.$emit('closeViewDia')
    },
     // 点击树形节点
     handleNodeClick(data) {
       this.title = "档案详情——" + data.tableName
        this.getViewForm(data)
    },

  },
  watch:{
    viewTreeData:{
      immediate:true,
      handler(val){
        this.title = "档案详情——"+val[0].tableName
        /* if(val.length > 0){
          getViewTreeForm({ id:val[0].id,tableName:val[0].tableName }).then(res => {
            this.infoData = res.data

          })
        } */
      }
    }
  }

}
</script>

<style lang="scss" scoped>
label,p{
  margin: 0;
  padding: 0;
}
.view-dialog-container{
  display: flex;
  height: 500px;

  .left-tree{
    flex: 1;
  }
  .right-info{
    flex: 4;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;

    .w50{
      width: 50%;
    }
    .w100{
      width: 100%;
    }
    .info-item{
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      border-left: 1px solid #ddd;
      &:nth-of-type(1){
        border-top: 1px solid #ddd;
      }
      &:nth-of-type(2){
        border-top: 1px solid #ddd;
      }
      >label{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 150px;
        background-color: #eeeeee;
        text-align: right;
        padding-right: 10px;
        border-right: 1px solid #ddd;
      }
      >p{
        width: calc(100% - 150px);
        padding-left: 10px;

      }
    }
  }
}

::v-deep .el-dialog{
  height: 800px;
}
</style>
